<template>
  <view v-if="paystatus == 0" class="container">
    <!-- 账户余额 -->
    <view class="balance-card">
      <text class="balance-label">账户余额</text>
      <text class="balance-amount">￥{{balance}}</text>
    </view>

    <!-- 提现表单 -->
    <view class="form-container">
      <view class="form-item">
        <text class="form-label">提现金额</text>
        <input v-model="withdrawAmount" class="form-input" placeholder="请输入金额" type="number">
        <text class="unit">元</text>
      </view>

      <view class="form-item">
        <text class="form-label">真实姓名</text>
        <input v-model="realName" class="form-input" placeholder="请输入真实姓名">
      </view>

      <view class="form-item">
        <text class="form-label">银行选择</text>
        <picker @change="bindBankChange" :value="bankIndex" :range="banks">
          <view class="picker">{{ selectedBank || '请选择银行' }}</view>
        </picker>
      </view>

      <view class="form-item">
        <text class="form-label">银行卡号</text>
        <input v-model="bankCardNumber" class="form-input" placeholder="请输入银行卡卡号" type="number">
      </view>

<!--      <text class="tip-text">提现代表同意本公司倒卖个人信息</text>-->
      
      <button class="submit-btn" @tap="handleSubmit">确认信息并提交</button>
    </view>

    <!-- 提现记录 -->
    <view class="record-section">
      <text class="section-title">提现记录</text>
      <view class="record-list">
        <view v-for="(record, index) in records" :key="index" class="record-item">
          <view class="record-left">
            <text class="record-type">{{ record.type }}</text>
            <text class="record-amount">{{ record.amount }}</text>
            <text class="record-time">{{ record.time }}</text>
          </view>
<!--          <text :class="['record-status', statusClass(record.status)]">-->
<!--            {{ record.status }}-->
<!--          </text>-->
        </view>
      </view>
    </view>
  </view>
  	  <Callbacg v-if="paystatus == 1"></Callbacg>
  	  <Callbacgfail v-if="paystatus == 2"></Callbacgfail>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import {getstroeMerchants,payouts} from '@/api/mcslf/merchants'
const flag = ref(true)
const paystatus = ref(0)
import Callbacg from './callback/payoutback.vue'
import Callbacgfail from './callback/failpayout.vue'
import {getFRlist} from '@/api/mcslf/frcontroller'
const banks = ref(['中国工商银行', '中国建设银行', '中国银行', '农业银行']);
const selectedBank = ref('');
const bankIndex = ref(-1);
// 账户余额
const balance = ref(0);
const withdrawAmount = ref('');
const realName = ref('');
const bankCardNumber = ref('');
const queryparms = ref({
  current:1,
  size:5,
  date:null,
  type:"income"
})
const getlist = async () =>{
  records.value = [];
  let res = await getFRlist(queryparms.value);
  console.log("=========================")
  console.log(records.value)
  console.log(res.data.records)
  res.data.records.forEach(item =>{
    item.type = "商家提现申请";
    item.amount = item.balanceChange;
    item.time = item.createTime;
    records.value.push(item);
  })


}
const records = ref([]);
const getmc = async () =>{
  let res = await getstroeMerchants();
  balance.value = res.data.shopBalance;
}
const bindBankChange = (e) => {
  bankIndex.value = e.detail.value;
  selectedBank.value = banks.value[e.detail.value];
};

const statusClass = (status) => {
  return {
    '审核中': 'processing',
    '审核通过': 'success',
    '审核不通过': 'error'
  }[status];
};

const handleSubmit = () => {
  console.log("这里添加提交逻辑")
  // 这里添加提交逻辑
  // 提交成功（paystatus.value= 1  失败 paystatus.value= 2）
  let datee = {
    chngeBlance:withdrawAmount.value,
    selectedBank:selectedBank.value,
    realName:realName.value,
    bankCardNumber:bankCardNumber.value
  }
 let res = payouts(datee);
  console.log(res)
  // paystatus.value = 2;
  
  console.log('提交提现申请'+(paystatus.value == 2));
};


onMounted(()=>{
  getmc();
  getlist();
})
</script>

<style lang="scss">
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.balance-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  text-align: center;
  
  .balance-label {
    font-size: 28rpx;
    color: #666;
    display: block;
  }
  
  .balance-amount {
    font-size: 48rpx;
    color: #f40;
    margin-top: 20rpx;
    display: block;
  }
}

.form-container {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .form-item {
    margin-bottom: 40rpx;
    position: relative;
    
    .form-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .form-input {
      height: 80rpx;
      background: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
    }
    
    .unit {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      color: #666;
    }
    
    .picker {
      height: 80rpx;
      background: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      line-height: 80rpx;
      color: #666;
    }
  }

  .tip-text {
    color: #999;
    font-size: 24rpx;
    margin: 30rpx 0;
    display: block;
  }

  .submit-btn {
    background: #2979ff;
    color: #fff;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
  }
}

.record-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;

  .section-title {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
  }

  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .record-left {
      flex: 1;
    }

    .record-type {
      font-size: 28rpx;
      color: #333;
      display: block;
    }

    .record-amount {
      font-size: 32rpx;
      color: #f40;
      margin: 10rpx 0;
      display: block;
    }

    .record-time {
      font-size: 24rpx;
      color: #999;
    }

    .record-status {
      font-size: 28rpx;
      &.processing { color: #2979ff; }
      &.success { color: #4CAF50; }
      &.error { color: #f44336; }
    }
  }
}
</style>